
<template>
  <div class="c-jComp">
    <!-- <Menu :open-names="openNames" width="180">
      <Submenu v-for="key in Object.keys(data)" :key="key" :name="key">
          <template slot="title">
              <Icon type="ios-paper" />
              {{$t(`compDesign.jComp.${key}`)}}
          </template>
          <MenuItem v-for="(c,j) in Object.keys(data[key])" :key="j" :name="c"
            class="compIco" tabindex="0" :data-name="c" :data-category="key">
            <span>{{$t(`compDesign.jComp.${c}`)}}</span>
          </MenuItem>
      </Submenu>
    </Menu> -->
    
    <Collapse v-model="tagSelect">
      <template v-for="(key,i) in Object.keys(data)">
        <Panel v-if="key !=='components'" :key="i">{{$t(`compDesign.jComp.${key}`)}}
          <div slot="content" style="display: flex;flex-wrap: wrap;justify-content: flex-start" :ref="'key'+i">
            <div v-for="(c,j) in Object.keys(data[key])" :key="j" class="compIco" tabindex="0"
              :data-name="c" :data-category="key">
              <i v-if="iconObj[c]" :class="'ivu-icon iconfont ' + iconObj[c]"></i>
              <span>{{$t(`compDesign.jComp.${c}`)}}</span>
            </div>
          </div>
        </Panel>
      </template>
    </Collapse>
  </div>
</template>

<script>
import storeVar from "../mixins/storeVar";
export default {
  name: "jComp",
  mixins:[storeVar],
  data(){
    return {
      tagSelect: ['0', '1', '2', '3'],
      openNames: Object.keys(this.data || {}),
      iconObj: {
        cliGenView: 'icon-editor-three-column', // 'icon-tx-changfangxing',
        cliTwoView: 'icon-icon_yihanglianglie-s',
        cliThreeView: 'icon-editor-three-column',
        cliDialog: 'icon-program-code',
        cliFormPanel: 'icon-form',
        cliEntityTable: 'icon-table',
        cliStaticTree: 'icon-tree-table',
        cliDynamicTree: 'icon-node-tree',
        cliScheduler: 'icon-rili',
        cliToolBox: 'icon-toolbar',
        cliButton: 'icon-anniu1',
        cliList: 'icon-liebiao',
        cliTimer: 'icon-timer',
        cliLine: 'icon-tubiao-zhexiantu',
        cliPie: 'icon-tubiao-bingtu',
        cliSankey: 'icon-os-icon-sankey',
       },
    }
  },
  props:{

  },
  computed:{
    data() {
      return this.compGroup.getCompMap() || {}
    }
  },
  mounted() {

  },
  methods:{

  }
}
</script>

<style scoped lang="less">
  .compIco{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
    /* box-shadow: 0 1px 6px rgba(0,0,0,0.2); */
    border: 1px solid #e8e9eb;
    border-radius: 4px;
    margin: 6px 0;
    cursor: move;
    font-size: 12px;
    /deep/ .ivu-icon {
      margin-right: 8px;
      font-size: 20px;
    }
    &:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }
  }
  .move {
    border: 1px solid gray;
    width:100%;
    height:100%;
  }
</style>

<style lang="less">
.c-jComp {
  .ivu-collapse-content>.ivu-collapse-content-box {
    padding: 8px 0;
  }
  .ivu-collapse {
    background-color: #fff;
  }
}
.ghostClass{
  background-color:  ghostwhite !important;
  opacity: 0.2 !important;
}
.chosenClass{
  background-color: ghostwhite !important;
  opacity: 0.5!important;
}
.dragClass{
  background-color: ghostwhite !important;
  opacity: 0.5 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
</style>
